<template>
  <div class="edu-page-warp">
    <el-card shadow="never">
      <div>
        <el-row type="flex" justify="space-between" class="con_title">
          <el-col :span="6">
            <div class="edu-page-title">{{titleLabel}}</div>
          </el-col>
          <!-- <el-col :span="3" style="text-align: right;">
            <el-button @click="back">{{$t('message.return')}}</el-button>
          </el-col> -->
        </el-row>
        <div class="edu-page-title" style="padding-top: 25px">{{this.$t('message.baseInfo')}}</div>
        <el-form :model="baseForm" label-suffix="：" ref="baseForm" label-width="120px" :rules="baseRules">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="this.$t('label.name')" prop="name">
                <el-input v-model="baseForm.name" :placeholder="$t('inputPlaceholder')" :disabled="isRead" :maxlength="255"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="this.$t('standardSetting.fundLabel')" prop="fund">
                <el-input v-model="baseForm.fund" :placeholder="$t('inputPlaceholder')" :disabled="isRead" :maxlength="6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="this.$t('standardSetting.isEnable')" prop="enable">
                <span class="color_no">{{this.$t('message.no')}}</span>
                  <el-switch v-model="baseForm.enable" active-color="#409eff" :disabled="isRead" :active-value="true" :inactive-value="false"> </el-switch>
                <span class="color_yes">{{this.$t('message.yes')}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="line_style"></div>
        <el-row style="padding-bottom: 25px">
          <el-col :span="3">
            <div class="edu-page-title">{{this.$t('standardSetting.getFundCondition')}}</div>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 5px;color: red;">tips：{{this.$t('standardSetting.stuNoTips')}}</div>
          </el-col>
        </el-row>
        <el-form :model="form" label-suffix="：" ref="form" label-width="120px" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="this.$t('label.stuCode')">
                <el-select
                  v-model="form.studentId"
                  :remote-method="selectStu"
                  :placeholder="$t('fundDistribution.stuNoPlaceholder')"
                  filterable
                  remote
                  style="width: 100%;"
                  :clearable="true"
                  :disabled="isRead"
                  @change="(value)=>stuInfoChange(value, 'students', 'selectedStu')"
                  multiple
                  :multiple-limit="20"
                >
                  <el-option
                    v-for="item in options.students"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('label.college')">
                <DictSelect
                  v-model="form.faculty"
                  clearable
                  filterable
                  :placeholder="$t('common.text.all')"
                  :data="options.academyId"
                  :multiple="true"
                  :disabled="isRead || stuState"
                  @change="collegeChange"
                  v-clearreadonly
                >
                </DictSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('label.major')">
                  <el-select
                    v-model="form.profession"
                    filterable
                    :placeholder="$t('common.text.all')"
                    style="width: 100%;"
                    :clearable="true"
                    :multiple="true"
                    :disabled="isRead || stuState"
                    :collapse-tags="true"
                    v-clearreadonly
                  >
                    <el-option
                      v-for="item in options.majorList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <MyMajor v-show="false" :faculty="form.faculty" :filterable="true" @load-done="saveMajorInfo"> </MyMajor>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('label.grade')">
                <DictSelect v-model="form.grade" :filterable="true" :data="options.grade" :clearable="true" :disabled="isRead || stuState" :multiple="true" v-clearreadonly></DictSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('label.trainingLevel')">
                    <DictSelect v-model="form.trainingLevel" :data="options.trainingLevel" :clearable="true" :disabled="isRead || stuState" :multiple="true" v-clearreadonly></DictSelect>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('label.trainingCategory')">
                    <DictSelect v-model="form.trainingCategory" :filterable="true" :data="options.trainingCategory" :disabled="isRead || stuState" :clearable="true" :multiple="true" v-clearreadonly></DictSelect>
                </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item :label="$t('label.degreeCategory')">
                    <DictSelect
                        v-model="form.degreeType"
                        :data="options.degreeType"
                        :clearable="true"
                        :multiple="true"
                        :disabled="isRead || stuState"
                        v-clearreadonly
                    ></DictSelect>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('label.formLearning')">
                    <DictSelect
                        v-model="form.formLearning"
                        :data="options.formLearning"
                        :clearable="true"
                        :multiple="true"
                        :disabled="isRead || stuState"
                        v-clearreadonly
                    ></DictSelect>
                </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('studentbaseinfo.PYFSDM')">
                <DictSelect
                filterable
                clearable
                v-model="form.trainingMethods"
                :data="options.traininglist"
                :disabled="isRead || stuState"
                :multiple="true" >
                </DictSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('label.leaveSchool')">
                <DictSelect
                  v-model="form.leaveSchool"
                  clearable
                  multiple
                  filterable
                  :disabled="isRead || stuState"
                  :data="options.leaveSchool"
                >
                </DictSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('achievementApply.teacherName')">
                <el-select
                  v-model="form.teacherId"
                  :remote-method="selectUser"
                  :placeholder="$t('preDefense.teacherNameTips')"
                  filterable
                  remote
                  style="width: 100%;"
                  :clearable="true"
                  :disabled="isRead || stuState"
                  multiple
                  @change="(value)=>stuInfoChange(value, 'users', 'selectedUser')"
                  :multiple-limit="20"
                  v-clearreadonly
                >
                  <el-option
                    v-for="item in options.users"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="this.$t('standardSetting.categories')">
                <DictSelect
                v-model="form.category"
                filterable
                :data="options.categories"
                :disabled="isRead || stuState"
                :multiple="true" >
                </DictSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('standardSetting.isInternationalStudents')">
                <DictSelect
                  v-model="form.isOverseas"
                  clearable
                  :data="options.isChinaSon"
                  :disabled="isRead || stuState"
                >
                </DictSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('standardSetting.chinaSon')">
                <DictSelect
                  v-model="form.chinaSon"
                  clearable
                  :data="options.isChinaSon"
                  :disabled="isRead || stuState"
                >
                </DictSelect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :label="$t('universityManagement.regionNameZN')"
                prop="state"
              >
                <DictSelect
                  v-model="form.state"
                  :placeholder="$t('universityManagement.pleaseSelect')"
                  filterable
                  :multiple="true"
                  :disabled="isRead || stuState"
                  :data="options.regionList"
                >
                </DictSelect>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="line_style"></div>
        <div class="edu-page-title" style="padding-bottom: 20px">{{this.$t('standardSetting.fundResult')}}</div>
        <div>{{showMsgFunc()}}</div>
        <div class="line_style" style="margin-top: 20px;"></div>
        <el-row type="flex" justify="end">
          <el-col v-if="!isRead" :span="6" style="text-align: right;">
            <el-button @click="back" >{{this.$t('message.cancel')}}</el-button>
            <el-button @click="submitFunc" type="primary">{{this.$t('message.submit')}}</el-button>
          </el-col>
          <el-col v-else :span="2" style="text-align: right;">
            <el-button @click="back" >{{this.$t('message.shut')}}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    </div>
</template>

<script>
import { fundsStandardAdd, fundsStandardUpdate, fundsStandardDetail } from "common/src/api/fundManagement/standardSetting";
import commonMixins from 'common/src/views/practiceManagement/commonMixins';
import MyMajor from "common/src/views/administrator/undergraduateTutor/component/MyMajor";
import { findTeacherInfoList, findStuInfoListForSelect } from 'common/src/api/studentinfo';
import { getALLCollege } from 'common/src/api/internationalExchanges/exchangeCollegeManagement';
import { getAllMajorList } from "common/src/api/resource/course";
import moment from 'moment';
export default {
    components: {
      MyMajor
    },
    mixins: [commonMixins],
    props: {
        isRead: {
            type: Boolean,
        },
        pathKey: {
            type: String,
        },
        rowInfo: {
            type: Object,
        },
        titleLabel: {
            type: String,
        },
    },
    data() {
        return {
            baseForm: {
              name: '',
              fund: '',
              enable: true
            },
            baseRules: {
              name: [
                { required: true, message: this.$t('inputPlaceholder'), trigger: 'change' }
              ],
              fund: [
                { required: true, validator: this.checkFund, trigger: 'change' }
              ]
            },
            form: {
              studentId: [],
              faculty: [],
              profession: [],
              grade: [],
              trainingLevel: [],
              trainingCategory: [],
              degreeType: [],
              formLearning: [],
              trainingMethods: [],
              leaveSchool: [],
              teacherId: [],
              category: [],
              isOverseas: '',
              chinaSon: '',
              state: [],
            },
            rules: {
            },
            options: {
              academyId: [], // 学院
              trainingLevel: [], // 培养层次
              trainingCategory: [], // 培养类别
              degreeType: [], // 学位类型
              formLearning: [], // 学习形式
              traininglist: [], // 培养方式
              leaveSchool: [], // 在校状态
              isChinaSon: [], // 是否状态
              regionList: [], // 国家地区
              categories: [], // 门类
              grade: [], // 年级
              users: [], // 导师
              selectedUser: [], // 被选中的导师
              majorList: [], // 专业
              students: [], // 学生
              selectedStu: [], // 被选中的学生
            },
            stringKey: [ "isOverseas", "chinaSon" ],
            standardMsg: '',
            stuState: false
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
      let maxYear = moment().year() + 1;
      let param = {
        X_YX: 'academyId', // 学院
        X_PYCC: 'trainingLevel', // 培养层次
        X_PYLB: 'trainingCategory', // 培养类别
        X_XWLX: 'degreeType', // 学位类型
        X_XXXS: 'formLearning', // 学习形式
        develop: 'traininglist', //培养方式
        X_LXZT: 'leaveSchool', // 在校状态
        K_SF: 'isChinaSon', // 是否状态
      };
      this.initOptions(param);
      this.getColleges();
      this.getCategories();
      this.options.grade = [];
      for (let i = 0; i <= 50; i++) {
        let showYear = maxYear - i;
        this.options.grade.push(
          {
            label: showYear + '',
            value: showYear + ''
          }
        );
      }
      // id存在则查详情数据
      if (this.rowInfo.id) {
        this.getDetail();
        if (this.rowInfo.teacherId) {
          let tutorArr = this.rowInfo.teacherId.split(',');
          tutorArr.forEach(item=>{
            this.selectUser(item, 'all');
          })
        }
        if (this.rowInfo.studentId) {
          let stuArr = this.rowInfo.studentId.split(',');
          this.stuState = true;
          stuArr.forEach(item=>{
            this.selectStu(item, 'all');
          })
        }
      }
    },
    methods: {
        submitFunc() {
          this.$refs.baseForm.validate((valid) => {
            if (valid) {
              let itemLength = 0;
              let params = _.cloneDeep(this.form);
              for (const key in this.form) {
                if (!this.form[key] || this.form[key] === '') {
                  continue;
                }
                itemLength = itemLength + this.form[key].length;
                if (!this.stringKey.includes(key)) {
                  this.form[key].sort();
                  params[key] = this.form[key].join(',');
                }
              }
              if (itemLength === 0) {
                this.$message.error(this.$t('standardSetting.notSetTips'));
                return;
              }
              params.standard = this.showMsgFunc();
              params = { ...this.baseForm, ...params };
              if (this.pathKey === 'add') { // 新增
                fundsStandardAdd(params).then(res=>{
                  if (res.code == 200) {
                    this.$message.success(this.$t('message.addSuccess'));
                    this.back();
                  }
                });
              } else if (this.pathKey === 'edit') { // 编辑
                params.id = this.rowInfo.id;
                fundsStandardUpdate(params).then(res=>{
                  if (res.code == 200) {
                    this.$message.success(this.$t('achievementApply.editSuccessfully'));
                    this.back();
                  }
                });
              }
            }
          });
        },
        back() {
          this.form = {
            studentId: [],
            faculty: [],
            profession: [],
            grade: [],
            trainingLevel: [],
            trainingCategory: [],
            degreeType: [],
            formLearning: [],
            trainingMethods: [],
            leaveSchool: [],
            teacherId: '',
            category: [],
            isOverseas: '',
            chinaSon: '',
            state: [],
          };
          this.baseForm = {
            name: '',
            fund: '',
            enable: false
          };
          this.$emit('emit:back', true);
        },
        // 根据申请id查询详情
        getDetail () {
          fundsStandardDetail(this.rowInfo.id).then(res=>{
            let info = res.data;
            if (res.code == 200 && info) {
              let detailInfo = _.cloneDeep(info);
              for (const key in info) {
                if (!this.stringKey.includes(key)) {
                  let itemArray = (info[key] && info[key].length > 0) ? info[key].split(',') : [];
                  detailInfo[key] = itemArray;
                }
              }
              for (const key in this.form) {
                this.form[key] = detailInfo[key];
              }
              this.baseForm = {
                name: info.name,
                fund: info.fund,
                enable: info.enable
              };
            }
          });
        },
        selectUser(query, type = 'one') {
          if (!query) return
          const data = {
              condition: query,
              pageNum_: 1,
              pageSize_: 10
          }
          this.loading = true;
          findTeacherInfoList(data)
            .then(res => {
                this.loading = false
                if (res.code == 200) {
                  this.options.users = this.transData(res.data.list, 'name', "code");
                  if (type === 'all') {
                    this.options.selectedUser.push(...this.transData(res.data.list, 'name', "code"));
                  }
                } else throw res.code
            })
            .catch(error => {
              this.loading = false
              this.$message({
                  type: 'error',
                  message: '查询用户出错'
              })
            });
        },
        // 获取国家地区
        async getColleges() {
          let { code, data } = await getALLCollege()
          if (code !== 200) return
          this.options.regionList = data.list.map(item => {
              return {
                  value: item.code,
                  label: item.nameCN,
                  labelEN: item.nameEN
              }
          })
        },
        //  获取门类
        getCategories() {
          let data = {
              level: 1,
              type: 1,
              page: false
          };
          getAllMajorList(data).then(res => {
              if (res.code == 200) {
                  this.options.categories = res.data.list.map(c => {
                      return {
                          label: c.name,
                          value: c.code
                      };
                  });
              }
          });
        },
        transData(list, name, code) {
          return list.map((item, index, array) => {
            return {
              label: item[name] + '(' + item[code] + ')',
              value: item[code]
            }
          })
        },
        showMsgFunc() {
          let formItem = this.form;
          let stuNoLabel = this.getArrayItem('studentId', 'selectedStu');
          let stuNoInfo =  stuNoLabel.length > 0 ? '学号等于' + stuNoLabel.join('或') : '';
          let academyLabel = this.getArrayItem('faculty', 'academyId');
          let academyInfo = academyLabel.length > 0 ? '学院等于' + academyLabel.join('或') : '';
          let majorLabel = this.getArrayItem('profession', 'majorList');
          let majorInfo = majorLabel.length > 0 ? '专业等于' + majorLabel.join('或') : '';
          let gradeLabel = this.getArrayItem('grade', 'grade');
          let gradeInfo = gradeLabel.length > 0 ? '年级等于' + gradeLabel.join('或') : '';
          let eduLevelLabel = this.getArrayItem('trainingLevel', 'trainingLevel');
          let eduLevelInfo = eduLevelLabel.length > 0 ? '培养层次等于' + eduLevelLabel.join('或') : '';
          let eduModeLabel = this.getArrayItem('trainingCategory', 'trainingCategory');
          let eduModeInfo = eduModeLabel.length > 0 ? '培养类别等于' + eduModeLabel.join('或') : '';
          let degreeTypeLabel = this.getArrayItem('degreeType', 'degreeType');
          let degreeTypeInfo = degreeTypeLabel.length > 0 ? '学位类型等于' + degreeTypeLabel.join('或') : '';
          let studyFormLabel = this.getArrayItem('formLearning', 'formLearning');
          let studyFormInfo = studyFormLabel.length > 0 ? '学习形式等于' + studyFormLabel.join('或') : '';
          let trainLabel = this.getArrayItem('trainingMethods', 'traininglist');
          let trainInfo = trainLabel.length > 0 ? '培养方式等于' + trainLabel.join('或') : '';
          let leaveSchoolLabel = this.getArrayItem('leaveSchool', 'leaveSchool');
          let leaveSchoolInfo = leaveSchoolLabel.length > 0 ? '在校状态等于' + leaveSchoolLabel.join('或') : '';
          let stuTutorLabel = this.getArrayItem('teacherId', 'selectedUser');
          let stuTutorInfo = stuTutorLabel.length > 0 ? '导师等于' + stuTutorLabel.join('或') : '';
          let categorLabel = this.getArrayItem('category', 'categories');
          let categorInfo = categorLabel.length > 0 ? '门类等于' + categorLabel.join('或') : '';
          let studentLabel = this.options.isChinaSon.filter(v=> v.value == formItem.isOverseas);
          let studentInfo = studentLabel.length > 0 ? '是否留学生等于' + studentLabel[0].label : '';
          let chinaSonLabel = this.options.isChinaSon.filter(v=> v.value == formItem.chinaSon);
          let chinaSonInfo = chinaSonLabel.length > 0 ? '是否港澳台等于' + chinaSonLabel[0].label : '';
          let regionCodeLabel = this.getArrayItem('state', 'regionList');
          let regionCodeInfo = regionCodeLabel.length > 0 ? '国家地区等于' + regionCodeLabel.join('或') : '';
          let showMsg = '';
          if (stuNoInfo.length > 0) {
            showMsg = stuNoInfo;
          }
          if (academyInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + academyInfo : academyInfo;
          }
          if (majorInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + majorInfo : majorInfo;
          }
          if (gradeInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + gradeInfo : gradeInfo;
          }
          if (eduLevelInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + eduLevelInfo : eduLevelInfo;
          }
          if (eduModeInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + eduModeInfo : eduModeInfo;
          }
          if (degreeTypeInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + degreeTypeInfo : degreeTypeInfo;
          }
          if (studyFormInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + studyFormInfo : studyFormInfo;
          }
          if (trainInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + trainInfo : trainInfo;
          }
          if (leaveSchoolInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + leaveSchoolInfo : leaveSchoolInfo;
          }
          if (stuTutorInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + stuTutorInfo : stuTutorInfo;
          }
          if (categorInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + categorInfo : categorInfo;
          }
          if (studentInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + studentInfo : studentInfo;
          }
          if (chinaSonInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + chinaSonInfo : chinaSonInfo;
          }
          if (regionCodeInfo.length > 0) {
            showMsg = showMsg.length > 0 ? showMsg + ' 并且 ' + regionCodeInfo : regionCodeInfo;
          }

          return showMsg;
        },
        saveMajorInfo(dataList) {
          this.options.majorList = dataList;
        },
        getArrayItem (formCode, optionsCode) {
          if (this.options[optionsCode].length === 0) {
            return [];
          }
          let labelList = [];
          this.form[formCode].forEach(item=>{
            let academyObj = this.options[optionsCode].filter(c=> c.value == item)[0];
            if (academyObj && academyObj.label && academyObj.label !== '') {
              labelList.push(academyObj.label);
            }
          });
          return labelList;
        },
        checkFund(rule, value, callback) {
          let regTest = /^\d+(\.\d{0,2})?$/;
          if (!value || value === '') {
            return callback(this.$t('inputPlaceholder'));
          }
          if (!regTest.test(value)) {
            return callback(this.$t('standardSetting.numTips'));
          }
          return callback();
        },
        // 查询学生信息接口
        selectStu (query, type = 'one') {
          if (!query) return;
          const data = {
            name: query,
            // teacherCodeAndName: this.form.stuTutorNo,  // 导师id
            pageNum_: 1,
            pageSize_: 50
          }
          this.loading = true
          findStuInfoListForSelect(data)
            .then(res => {
              this.loading = false
              if (res.code == 200) {
                this.options.students = this.transData(res.data.list, 'name', 'studentId');
                if (type === 'all') {
                  this.options.selectedStu.push(...this.transData(res.data.list, 'name', 'studentId'));
                }
              } else throw res.code
            })
            .catch(error => {
                this.loading = false
                this.$message({
                    type: 'error',
                    message: '查询用户出错'
                })
            })
        },
        // 学院改变清空专业信息
        collegeChange(value) {
          if (value.length === 0) {
            this.options.majorList = [];
          }
          this.form.profession = [];
        },
        // 学生信息改变
        stuInfoChange(value, optionsKey, saveKey) {
          value.forEach(item=>{
            let oneItem = this.options[optionsKey].filter(v=> v.value == item);
            if (oneItem.length > 0) {
              this.options[saveKey].push(...oneItem);
            }
          });
          // 设置学生时别的条件就不能设置了
          if (value.length > 0 && optionsKey === 'students') {
            this.stuState = true;
            for (const key in this.form) {
              if (key === 'studentId') {
                continue;
              }
              if (this.stringKey.includes(key)) {
                this.form[key] = '';
              } else {
                this.form[key] = [];
              }
            }
          } else {
            this.stuState = false;
          }
        }
    }
};
</script>

<style scoped lang="scss">
.con {
    background-color: white;
    &_title {
        width: 100%;
        border-bottom: solid #ccc 2px;
        padding-bottom: 20px;
    }
}
.line_style {
  border-bottom: solid #ccc 2px;
  margin-bottom: 20px;
}
.color_no {
  color: #ccc;
  margin-right: 5px;
}
.color_yes {
  color: #222;
  margin-left: 5px;
}
</style>
